<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#box{
				height:700px;
				width:1000px;
				margin: 0 auto;
				border:1px solid #000000;
				position: relative;
			}
			#main{
				width:100%;
				height:605px;
				position: relative;
				/*在弹幕区域内滚动显示*/
				overflow: hidden;
			}
			p{
				position: absolute;
				left:1000px;
				/*添加宽度是为了让文字成一横排显示*/
				width:100%;
				top:0;
			}
			#bottom{
				width:100%;
				height:80px;
				background: #ABCDEF;
				text-align: center;
				padding-top: 15px;
				position: absolute;
				left: 0;
				bottom: 0;
			}
			#txt{
				width:300px;
				height:50px;	
			}
			#btn{
				width:100px;
				height:50px;				
			}
		</style>
		<script src="jquery-3.1.1.js"></script>
		<script type="text/javascript">
			$(function(){
				//获取弹幕显示区域的高度
				var tentH=parseInt($("#main").height());
				//弹幕文字的颜色
				var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];
				
				$("#btn").on("click",auto);
				document.onkeydown=function(e){
					//按下回车键发送消息
		            if(e.keyCode == 13){
		                auto();
		            }
		        };
		        //添加弹幕效果的函数
				function auto(){
					//获取输入框的值
					var $value = $("#txt").val();
					//在弹幕显示区域追加输入框中的值
					$("#main").append("<p>" + $value + "</p>");
					//弹幕发送成功后，清空输入框的内容
					$("#txt").val("");
					//获取一个弹幕显示区域内的随机高度，用来确定每个弹幕信息的显示位置
					var appearTop=parseInt(tentH*(Math.random()));
					//产生每次弹幕文字颜色数组下标的随机数
					var num=parseInt(colorArr.length*(Math.random()));
					//弹幕文字的样式设置
					$("p:last-child").css(
						{
							"top":appearTop,
							"color":colorArr[num],
							"font-size":"20px"
							}
						);
					$("p:last-child").animate(
						{
							"left":"-200px"
							},
						10000);
					$("p:last-child").stop().animate(
						{
							"left":"-300px"
						},
						10000,"linear",function(){
							//linear:使弹幕文字的速度匀速运动
							//清除弹幕，防止堆叠
                        $(this).remove();
                  });				
				};	
			})
		</script>
	</head>
	<body>
		<div id="box">
			<div id="main">
						<!--弹幕内容显示区-->
			</div>
			<div id="bottom">
				<input type="text" id="txt" placeholder="请输入内容" />
				<input type="button" id="btn" value="发射" />
			</div>
		</div>
	</body>
</html>
